<!-- <template>
  <div class="pdfcon">
    <iframe class="pdf" :src="url" frameborder="0"></iframe>
  </div>
</template> -->
<template>
  <div>
    <div v-for="page in pdfList" :key="page">
      <canvas :id="'pdfCanvas' + page"></canvas>
    </div>
  </div>
</template>
<script>
import * as PDFJS from "pdfjs-dist"
import src from "pdfjs-dist/build/pdf.worker.min.js"
import pdf from "/public/test.pdf"
// 为防止pdfjsWorker丢失，需要将其挂载在window上（三方库的问题）
window.pdfjsWorker = src
export default {
  name: "PreviewPdf",
  props: {
    view: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {
      pdfList: [],
      url: "",
      pdf: "test.pdf",
    }
  },
  props: {
    pdfData: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  created() {
    // 此处的src要给路径
    PDFJS.GlobalWorkerOptions.workerSrc = "/public/pdfjs/build/pdf.worker.js"
    // this.getPdfFile(this.pdfData.licenseId)
    this.getPdfFile()
  },
  methods: {
    // iframe + 本地文件路径
    /* getPdfFile() {
      this.url = "pdfjs/web/viewer.html?file=" + pdf
    }, */
    // canvas  + 本地文件路径
    /* getPdfFile() {
      this.pdf = pdf
      this.pdfList.push(this.pdf)
      console.log(this.pdf)
      this._loadFile(this.pdf)
    }, */
    // iframe/canvas + blob -> url
    async getPdfFile() {
      fetch(pdf)
        .then((response) => {
          console.log(response)
          return response.blob()
        })
        .then((data) => {
          console.log(data)
          const objectURL = URL.createObjectURL(data)
          // iframe
          // this.url = "pdfjs/web/viewer.html?file=" + objectURL
          // canvas
          this.pdfList.push(objectURL)
          this._loadFile(objectURL)
        })
        .catch((error) => {
          console.error("Error:", error)
        })
    },
    // pdf文件
    /* async getPdfFile(licenseId) {
      const url = ``
      try {
        const res = await this.$http({
          url,
          method: "get",
          params: {
            licenseId,
          },
          responseType: "blob",
        })
        if (res.status === 200) {
          const content = res.data
          let file = new Blob([content], {
            type: "application/pdf;charset-UTF-8",
          })
          const objectURL = URL.createObjectURL(file)
          this.pdfList.push(objectURL)
          this._loadFile(objectURL)
          return
        }
      } catch (error) {
        console.log(error, "getPdfFile")
      }
    }, */
    _loadFile(url) {
      const loadtask = PDFJS.getDocument(url)
     loadtask.promise
        .then((pdf) => {
          this.pdfDoc = pdf
          const pdfPages = this.pdfDoc.numPages
          this.pdfList = pdfPages
          this.$nextTick(() => {
            this._renderPage(1)
          })
        })
        .catch((e) => console.dir(e))
    },
    _renderPage(num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById("pdfCanvas" + num)
        console.log(canvas);
        var vp = page.getViewport({ scale: 1 })
        let ctx = canvas.getContext("2d")
        let dpr = window.devicePixelRatio || 1
        let bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1
        let ratio = dpr / bsr
        let viewport = page.getViewport({
          scale: window.innerWidth / vp.width,
        })
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio

        canvas.style.width = viewport.width + "px"

        canvas.style.height = viewport.height + "px"

        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        }
        console.log(canvas, "------")
        if (canvas) {
          page.render(renderContext)
        }
        if (this.pdfList > num) {
          this._renderPage(num + 1)
        }
      })
    },
  },
}
</script>

<style scoped>
.pdfcon {
  height: 100vh;
}
.pdf {
  width: 100%;
  position: fixed;
  top: 70px;
  left: 0;
  height: 94vh;
}
</style>
